<!DOCTYPE html>
<html>
<head>
<style type="text/css" media="screen">
canvas {
    margin: 20px;
    width: 200px;
    height: 200px;
    padding: 0 0;
}
.border {
    border: 1px solid black;
}
</style>
<script src="../../resources/run-after-layout-and-paint.js"></script>
<script>
function initWebGL()
{
    var canvas = document.getElementById('canvas');
    var gl = canvas.getContext("webgl", {'antialias': false});
    if (!gl) {
        alert("No WebGL context found");
        return null;
    }

    return gl;
}

var gl = null;

function init()
{
  gl = initWebGL();
  gl.viewport(0, 0, 200, 200);
  gl.clearColor(1, 0, 0, 1); // red
  gl.clear(gl.COLOR_BUFFER_BIT);
  runAfterLayoutAndPaint(drawGreen, true);
}

// Note that this test can't actually reproduce an under-invalidation bug when
// running as a web test, because the under-invalidation causes surface
// under-damage only, and it won't be shown in the captured image as the image
// is always treated as fully damaged. You need to run this test in browser
// to verify an under-invalidation bug.
function drawGreen()
{
  gl.clearColor(0, 1, 0, 1); // green
  gl.clear(gl.COLOR_BUFFER_BIT);
}

</script>
</head>
<body onload="init()">
<canvas id="canvas" width="200" height="200"></canvas>
</body>
</html>
